.page-paging {
  :deep() {
    &>.paging-top {
      &>.top-container {
        padding: 32rpx;

        &>.back {
          display: flex;
          align-items: centers;
          margin-bottom: 32rpx;

          .com-button {
            &__content {
              display: flex;
              align-items: center;
              .icon-forward {
                transform: rotate(-180deg);
                margin-right: 16rpx;
              }
            }
          }
        }

        &>.cards {
          $count: 2;
          $gap: 16rpx;
          display: flex;
          flex-wrap: wrap;
          margin: calc($gap * -1);

          &>.item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc((100% - $count * $gap * 2) / $count);
            margin: $gap;
            padding: 32rpx;
            border-radius: 32rpx;
            background: var(--warning-background-color);

            .text {
              margin-bottom: 32rpx;
            }

            .com-input {
              padding: 0;
              text-align: center;
              border-radius: 0;
            }
          }
        }
      }
    }

    .page-item {
      display: flex;
      align-items: center;
      justify-content: space-between;

      &.record-header {
        margin-top: 32rpx;
      }

      $size: 20, 20, 15, 33, 12;

      @for $i from 1 through length($size) {
        &>:nth-child(#{$i}) {
          $item: nth($list: $size, $n: $i);
          width: calc($item * 1%);
        }
      }

      &>:last-child {
        text-align: right;
      }

      &:not(.record-header) {
        margin-bottom: 32rpx;
        &>:last-child {
          color: red;
        }
      }
    }
    .container {
      &>.page-list {
        padding: 0 32rpx;
      }
    }
  }
}